<template>
  <li>
    <input type="checkbox"
      :checked="item.compeleted ? 'compeleted' : ''"
      @click="handleItem('COMPELETED', item.id)"
    />
    <span :class="{ compeleted: item.compeleted }">{{ item.text }}</span>
    <button
      @click="handleItem('REMOVE',item.id)"
    >
      删除
    </button>
  </li>
</template>

<script>
export default {
  name: 'ListItem',
  props:{
    item: Object
  },
  methods:{
    handleItem(...args){
      this.$emit('handleItem',...args)
    }
  }
}
</script>

<style>
  .compeleted{
    text-decoration: line-through;
  }
</style>
